<template>
  <div class="identityInfo">
    <el-dialog title="编辑信息" :visible="dialogVisible" center>
      <el-form>
        <el-form-item label="姓名:">
          <el-input
            v-model="form.username"
            autocomplete="off"
            :disabled="isDisabled"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别:">
          <el-select
            v-model="form.sex"
            placeholder="请选择"
            :disabled="isDisabled"
          >
            <el-option
              v-for="item in sexlist"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="身份证号:">
          <el-input v-model="form.idCard" :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="糖化血红蛋白:" class="discountline">
          <el-input-number
            v-model="form.sugarNum"
            :min="0"
            :max="100"
            :controls="false"
            :disabled="isDisabled"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="住院号:">
          <el-input
            v-model="form.hospitalNum"
            disabled
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="体重:">
          <el-input-number
            v-model="form.weight"
            :min="0"
            :controls="false"
            :disabled="isDisabled"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="身高:">
          <el-input-number
            v-model="form.height"
            :min="0"
            :controls="false"
            :disabled="isDisabled"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="生日:">
          <el-date-picker
            v-model="form.brithday"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期时间"
            :disabled="isDisabled"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="请选择糖尿病类型:" class="discountline">
          <el-select
            v-model="form.sugarType"
            placeholder="请选择"
            :disabled="isDisabled"
          >
            <el-option
              v-for="item in sugarTypelist"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择科室:">
          <el-select
            v-model="form.departmentId"
            placeholder="请选择"
            :disabled="isDisabled"
            @change="departmentchange"
          >
            <el-option
              v-for="item in departmentlist"
              :key="item.id"
              :label="item.departmentName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择管理医生:" class="discountline">
          <el-select
            v-model="form.doctorId"
            placeholder="请选择"
            :disabled="isDisabled"
          >
            <el-option
              v-for="item in doctorlist"
              :key="item.id"
              :label="item.doctorName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="入院时间:">
          <el-date-picker
            v-model="form.toHospitalTime"
            type="datetime"
            value-format="yyyy-MM-dd hh:mm:ss"
            placeholder="选择日期时间"
            :disabled="isDisabled"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="clodeDialog">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: "", //姓名
        sex: "", //性别
        idCard: "", //身份证号
        sugarNum: "", //糖化血红蛋白
        hospitalNum: "", //住院号
        weight: "", //体重
        height: "", //身高
        sugarType: "", //糖尿病类型
        departmentId: "", //科室
        doctorId: "", //管理医生
        toHospitalTime: "", //入院时间
      },
      sexlist: [
        {
          label: "男",
          id: "1",
        },
        {
          label: "女",
          id: "0",
        },
      ],
      departmentlist: [],
      doctorlist: [],
      sugarTypelist: [
        {
          label: "无",
          value: "0",
        },
        {
          label: "1型",
          value: "1",
        },
        {
          label: "2型",
          value: "2",
        },
        {
          label: "妊娠",
          value: "3",
        },
        {
          label: "其他",
          value: "4",
        },
      ],
      isDisabled: false,
    };
  },
  props: {
    dialogVisible: {
      type: Boolean,
      required: true,
    },
    extent: {
      type: String,
      required: true,
    },
  },
  mounted() {
    if (this.extent == "leavehospital") {
      this.isDisabled = true;
    } else {
      this.isDisabled = false;
    }
    this.getDepartment();
  },
  methods: {
    clodeDialog() {
      this.$parent.openidentityInfo(false);
    },
    // 获取所有科室
    getDepartment() {
      let routeid = sessionStorage.getItem("routeID");
      let routeID = routeid ? JSON.parse(routeid)["/index"] : "";
      let data = {
        perId: routeID,
      };
      this.$api
        .getDepartment(data)
        .then((res) => {
          this.departmentlist = res.data.data;
          this.getInfoDetail();
        })
        .catch((err) => {});
    },
    // 获取用户基本信息
    getInfoDetail() {
      let data = {
        id: this.$route.query.id,
      };
      this.$api.getInfoDetail(data).then((res) => {
        // console.log(res.data.data);
        this.form = res.data.data;
        this.departmentchange(this.form.departmentId);
      });
    },
    // 获取医生列表
    departmentchange(id) {
      let doctorlist = this.departmentlist.filter((item) => {
        return item.id == id;
      });
      this.doctorlist = doctorlist[0].bloodSugarDoctorList;
    },
    // 修改数据
    modify() {
      this.$api
        .updatePatientInfo(this.form)
        .then((res) => {
          this.$message.success(res.message);
          this.$parent.openidentityInfo(false);
        })
        .catch((err) => {
          this.$parent.openidentityInfo(false);
        });
    },
    leaveHospital() {
      let data = {
        id: this.$route.query.id,
      };
      this.$api
        .outHospital(data)
        .then((res) => {
          this.$message.success(res.message);
          this.$parent.openidentityInfo(false);
        })
        .catch((err) => {
          this.$parent.openidentityInfo(false);
        });
    },
    // 修改完成,提交数据
    submit() {
      if (this.extent == "leavehospital") {
        this.leaveHospital();
      } else {
        this.modify();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.identityInfo {
   & >>>.el-dialog__headerbtn {
      display: none;
    }
  .el-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    .el-form-item {
      width: 45%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      & >>> .el-form-item__label {
        margin: 0;
        width: 80px;
        text-align: left;
        height: 100%;
        line-height: 1.2;
      }
      & >>> .el-form-item__content {
        .el-input__inner {
          max-width: 180px;
        }
        .el-date-editor.el-input {
          max-width: 180px;
        }
      }
    }
  }
  @media screen and (max-width: 1253px) {
    .el-form {
      justify-content: center;
      .el-form-item {
        width: 60%;
      }
    }
  }
}
</style>